<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 800px;
            margin: 0 auto;
        }

        .search {
            margin: 0 auto;
            margin-bottom: 10px;
        }

        input {
            width: 131px;
        }

        table,
        table tr th,
        table tr td {
            border: 1px solid #000;
        }

        table {
            width: 500px;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
            
        }
 
    </style>

</head>

<body>

    <div class="search">
        <!-- 按照价格查询：<input type="text" class="start">- <input type="text" class="end"> -->
        按照姓名查询：
        <input type="text" class="md">
        <button class="search-name">查询</button>
    </div>
    <div class="main">


        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>出生日期</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script>
        var data = [{
                "name": "程宇俊",
                "gender": "男",
                "birthday": "2010-04-21"
            },
            {
                "name": "罗丽娟",
                "gender": "女",
                "birthday": "1986-09-17"
            },
            {
                "name": "何冬英",
                "gender": "女",
                "birthday": "1957-11-14"
            }
        ];
        //1.先获取相应是元素
        var tbody = document.querySelector('tbody');
        var search_price = document.querySelector('.search-price');
        var search_name = document.querySelector('.search-name');
        var product = document.querySelector('.md');

        setDate(data);
        //2.把数据渲染到页面中
        function setDate(mydata) {
            tbody.innerHTML = '';

            if (mydata.length > 0) {
                mydata.forEach(function (value) {
                    var tr = document.createElement('tr');
                    tr.innerHTML = '<td>' + value.name + '</td><td>' + value.gender + '</td><td>' + value
                        .birthday +
                        '</td>';
                    tbody.appendChild(tr);
                });
            } else {
                tbody.innerHTML = '查找不到数据,您不是失地用户';
            }

        }

        search_name.addEventListener('click', function () {
            var arr = [];
            data.some(function (value) {
                console.log(product.name)
                var names = document.querySelector('.md').value
                if (value.name === names) {
                    console.log("2", value);
                    arr.push(value);
                    return true; //用some()后面只能写true和false
                }
            });
            //把拿到的数据渲染到页面中
            setDate(arr)
        })
    </script>


</body>

</html>